<template>
    <Row :gutter="32">
        <Col span="24">
            <Collapse style="border: 0px" simple :value="'0'" :accordion="true">
                <Panel v-for="(group,index) in Object.keys(values)" :key="group" :name="`${index}`" style="border: 0px">
                    <Input :value="group" style="width:350px;display: inline-table"
                           :disabled="group==='general'?true:false" @on-change="currentGroup=$event.target.value">
                        <Icon v-if="group!=='general'" slot="append" type="md-checkmark" style="margin:0 2px"
                              @click="updateGroup(group,$event)"/>
                    </Input>
                    <Button style="width:20px;height:20px;font-size: 10px;margin:0 5px" icon="ios-add"
                            @click="addGroup"></Button>
                    <Button v-if="group!=='general'" style="width:20px;height:20px;font-size: 10px;margin:0 5px"
                            icon="ios-remove" @click="removeGroup(group)"></Button>
                    <Collapse slot="content" style="border: 0px" simple :value="'0'" :accordion="true">
                        <Panel v-for="(item,i) in values[group]" :key="i" :name="`${i}`" style="border: 0px">
                            {{ item.propertyName }}
                            <Button  style="width:20px;height:20px;font-size: 10px;margin:0 5px"
                                    icon="ios-add" @click="addProperty(group)"></Button>
                            <Button v-if="values[group].length>1"
                                    style="width:20px;height:20px;font-size: 10px;margin:0 5px" icon="ios-remove"
                                    @click="removeProperty(group,i)"></Button>
                            <property slot="content" :data="item" :type="type"></property>
                        </Panel>
                    </Collapse>
                </Panel>
            </Collapse>
        </Col>
    </Row>
</template>

<script>
import property from './cfg-property';

export default {
    name: "cfg-values",
    components: {property},
    data() {
        return {
            propertyTpl: {
                propertyName: "_newName",
                propertyType: "String",
                defaultValue: "",
                comments: ""
            }
        }
    },
    props: {
        values: {
            default: () => {
                return {}
            }
        }
    },
    computed: {
        lang() {
            return {
                "en-US": {
                    String: 'String',
                    Double: 'Double',
                    Integer: 'Integer',
                    Boolean: 'Boolean',
                    Datetime: 'Datetime'
                },
                "zh-CN": {
                    String: '字符',
                    Double: '浮点',
                    Integer: '整型',
                    Boolean: '布尔',
                    Datetime: '时间'
                },
            }[this.G_Locale]
        },
        type() {
            return [
                {label: this.lang.String, value: 'String'},
                {label: this.lang.Double, value: 'Double'},
                {label: this.lang.Integer, value: 'Integer'},
                {label: this.lang.Boolean, value: 'Boolean'},
                {label: this.lang.Datetime, value: 'Datetime'}
            ]
        },
    },
    methods: {
        /**
         * 添加新属性组
         */
        addGroup() {
            if (!Object.keys(this.values).includes('_newGroup')) {
                this.$set(this.values, '_newGroup', [this.tools.lodash.cloneDeep(this.propertyTpl)])
            }
        },
        /**
         * 更新属性组
         * @param group
         * @param $event
         */
        updateGroup(group, $eventModel) {
            if (!!this.currentGroup) {
                let newGroup = this.values[group];
                this.$delete(this.values, group);
                this.$set(this.values, this.currentGroup, newGroup)
                this.currentGroup = null;
            }
        },
        /**
         * 移除属性组
         * @param group
         */
        removeGroup(group) {
            this.$delete(this.values, group);
        },
        /**
         * 在属性组中添加属性
         * @param group
         */
        addProperty(group) {
            this.values[group].push(this.tools.lodash.cloneDeep(this.propertyTpl))
        },
        /**
         * 移除属性组中的属性
         * @param group
         * @param index
         */
        removeProperty(group, index) {
            this.values[group].splice(index, 1)
        }
    }
}
</script>
